import { useMemo, useState } from 'react'
import './App.css'
import { Button } from 'antd'
import UseMemoDemo from './components/UseMemoDemo'
import StoreState from './components/StoreState'
import RTKDemo1 from './components/RTKDemo1'
import RTKDemo2 from './components/RTKDemo2'

function App() {
  const [count, setCount] = useState(0)
  const [ privateCount, setPrivateCount ] = useState(100)

  const onAddPrivate = () => {
    // console.log('私有')
    setPrivateCount(privateCount + 1)
  }

  const onAdd = () => {
    setCount(count + 1)
  }

  const countMemo = useMemo(() => count, [count])


  return (
    <>
      <div>
        <div>父组件私有属性：{privateCount}</div>
        <Button onClick={onAddPrivate}>privateCount++</Button>
      </div>
      <div>
        <Button onClick={onAdd}>count++</Button>
        <span>{count}</span>
      </div>
      <UseMemoDemo countMemo={countMemo} />

      <StoreState />

      <RTKDemo1 />

      <RTKDemo2 />
    </>
  )
}

export default App
